<template>
<div class="content">
  <div class="search">
    <van-cell-group>
      <van-search
          v-model="searchText"
          placeholder="请输入搜索关键词"
          @search="onSearch"
      >
      </van-search>
    </van-cell-group>
  </div>
  <div class="shop-list">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="card" v-for="item in list" :key="item">
        <div class="img">
          <img src="https://img0.baidu.com/it/u=327684094,1942382095&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">
        </div>
        <div class="info">
          <div class="name">名称：蔬菜大礼包</div>
          <div class="unit">单位：斤</div>
          <div class="foot">
            <van-button icon="delete" type="warning" size="small">删除</van-button>
          </div>
        </div>
      </div>
    </van-list>
  </div>
  <div class="footer">
    <van-button class="btn" type="primary" @click="addVegetable">添加蔬菜</van-button>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import router from "@/router/index.js";

const searchText = ref('')
const list = ref([])
const loading = ref(false)
const finished = ref(false)

const onSearch = () =>{

}
const addVegetable = () =>{
  router.push('/vegetableDetails')
}
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    for (let i = 0; i < 100; i++) {
      list.value.push(list.value.length + 1);
    }
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 500)
}
</script>

<style lang="less" scoped>
.content{
  width:100%;
  height:100%;
  .search{
    box-sizing: border-box;
    width:100%;
    height:3rem;
  }
  .shop-list{
    height:calc(100% - 8rem);
    overflow-y:auto;
    .card{
      box-sizing: border-box;
      padding:0.5rem;
      display: flex;
      .img{
        border-radius:0.5rem;
        overflow:hidden;
        width:7rem;
        height:6rem;
        img{
          width:100%;
          height:100%;
        }
      }
      .info{
        flex:1;
        margin-left:1rem;
        .name{
          font-size:1.5rem;
          color: rgba(96, 96, 96, 0.8);
        }
        .unit{
          margin-top: 0.5rem;
          font-size:1rem;
          color: rgba(96, 96, 96, 0.8);
        }
      }
      .foot{
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .footer{
    width:100%;
    height:6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      width :80%;
    }
  }
}
</style>